<template>
  <div>
    <!-- 1.在 HTML 中定义有宽度和高度的父容器（推荐） -->
    <div ref="chart" class="chart"></div>
  </div>
</template>
<script>
// 2.获取Echarts  npm install echarts
// 3.引入Echarts
import *as echarts from 'echarts'
export default{
  name:'echarts',
  props:{
    option:{
      type:Object,
      default:() => {
        return
      }
    }
  },
  data(){
    return{
      chart: null,
    }
  },
  created(){

  },
  mounted(){
    this.initChart()
  },

  methods:{
    initChart() {
      const _this = this;
      // 4.调用echarts.init('节点')，创建echarts实例
      //【注意】调用 echarts.init 时需保证容器已经有宽度和高度
      // vue中用ref，原生用id，id唯一，复用时不出现效果
      this.chart = echarts.init(this.$refs.chart);

      // loading 动画 调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
      // this.chart.showLoading();
      // this.chart.hideLoading();

      // 绘制图表myChart.setOption
      this.chart.setOption(this.option)

      // 监听图表容器的大小并改变图表大小,监听页面的 resize 事件获取浏览器大小改变的事件
      window.addEventListener('resize', function() {
        _this.chart.resize();
      });

      // 开发者可以监听这些事件，然后通过回调函数做相应的处理。
      // 使用 query 只对指定的组件的图形元素的触发回调：
      // chart.on(eventName, query, handler);chart.on('click', 'series', function() {});
      // https://echarts.apache.org/handbook/zh/concepts/event
      this.chart.on('click', function() {
        // console.log('点击事件',params);
        // 做些什么？可以执行一个由父组件传递来的函数
      });
      this.chart.on('mouseover',function() {
        // console.log('移入事件',params);
      });
      this.chart.on('mouseout',function() {
        // console.log('移出事件',params);
      });
      // 图例开关的行为只会触发 legendselectchanged 事件
      this.chart.on('legendselectchanged', function() {
        // var isSelected = params.selected[params.name];
        // console.log(`${ isSelected ? '选中了' : '取消选中了' }图例${ params.name }`);
      });
      // 它是从“空白处”触发的
      this.chart.getZr().on('click', function(event) {
        if (!event.target) {
          // 点击在了空白处，做些什么。
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .chart{
    width: 100%;
    height: 100%;
  }
</style>



<!-- 常见echarts配置项 -->
